<template>
  <div :class="{ container: true, close: flag }" ref="toast">
    <div class="close-icon" @click="close">x</div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "toast",
  data() {
    return {
      msg: "",
      flag: false,
    };
  },
  mounted() {
    this.$refs.toast.addEventListener("animationend", this.handleAnimationend);
  },
  beforeDestroy() {
    this.$refs.toast.removeEventListener(
      "animationend",
      this.handleAnimationend
    );
  },
  methods: {
    handleAnimationend(e) {
      if (e.animationName.startsWith("animateOut")) {
        this.$refs.toast.style.display = "none";
      }
    },
    close() {
      this.flag = true;
    },
  },
};
</script>

<style scoped>
.container {
  position: fixed;
  right: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  min-width: 250px;
  min-height: 80px;
  animation: animateIn 0.5s ease;
}
.close-icon {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}
.close {
  animation: animateOut 0.5s ease forwards;
}
@keyframes animateIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes animateOut {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
</style>
